import react from "react"
// 函数组件 （无状态组件）
// 组件的名字首字母最好大写
// 展示组件时首字母必须大写
let name: string = '冰心'
let str: string = '夏日之冰'
// 条件渲染
let num: number = 12

// react类型声明
// 1.创建元素节点是：react.ReactNode
// 2.组件返回值是：react.ReactElement


//创建一个元素变量
// react元素创建出来是不允许改变的
let el: react.ReactNode = <h1>一个元素</h1>
// el.type='h2' //不允许改变，会报错
el = <h2>新的元素</h2>
console.log(el)

const Child = () => {
    console.log(Child)
    if (num > 10) {
        return (
            <fieldset>
                <legend>Child</legend>
                <h1>一个组件</h1>
                <h3>{name}</h3>
                {/* 三元表达式 */}
                <h3>{name === '冰心' ? "yes" : "no"}</h3>
                {/* 调用方法 */}
                {str.split("").reverse().join("")}
                {/* 可以直接展开数组 */}
                {['1', '2', '3', '4', '5', '6']}
            </fieldset>
        )
    } else {
        return <h2>123</h2>
    }
}

export default Child